<template>
  <div class="commentform-container">
    <form
      @submit.prevent="handleSubmit"
      class="form-box"
      id="data-form-container"
    >
      <div class="form-nickname">
        <input
          type="text"
          placeholder="请输入昵称"
          :maxlength="10"
          v-model.trim="nickname"
          @focus="subFailedText = ''"
        />
        <span class="form-count">{{ nickname.length }}/10</span>
        <b v-if="!nickname">{{ nicknameError }}</b>
      </div>
      <div class="form-content">
        <textarea
          maxlength="300"
          placeholder="请输入评论内容"
          rows="5"
          v-model.trim="content"
          @focus="subFailedText = ''"
        ></textarea>
        <span class="form-count">{{ content.length }}/300</span>
        <b v-if="!content">{{ contentError }}</b>
      </div>
      <div class="form-submit">
        <button :disabled="submitDisabled" class="submit-btn" type="submit">
          {{ submitDisabled ? "正在提交..." : "提交" }}
        </button>
        <span class="submit-failed-text" v-if="subFailedText">{{
          subFailedText
        }}</span>
      </div>
    </form>
  </div>
</template>

<script>
export default {
  name: "CommentForm",
  data() {
    return {
      nickname: "",
      content: "",
      submitDisabled: false,
      subFailedText: "",
      nicknameError: "",
      contentError: "",
    };
  },
  methods: {
    handleSubmit() {
      if (!this.nickname || !this.content) {
        this.nicknameError = this.nickname ? "" : "昵称不能为空";
        this.contentError = this.content ? "" : "内容不能为空";
        return;
      }
      this.submitDisabled = true;
      // 提交表单
      this.$emit(
        "submit",
        { nickname: this.nickname, content: this.content },
        (submitFailed) => {
          this.subFailedText = submitFailed;
          this.submitDisabled = false;
          this.nickname = "";
          this.content = "";
          this.nicknameError = "";
          this.contentError = "";
        }
      );
    },
  },
};
</script>

<style scoped lang="less">
@import "@/styles/var.less";
input,
textarea {
  padding: 8px;
  width: 100%;
  outline: none;
  border: 1px dashed #ccc;
  resize: none;
  border-radius: 5px;
  box-sizing: border-box;
}

.form-count {
  color: @gray;
  font-size: 12px;
  position: absolute;
}
.commentform-container {
  box-sizing: border-box;
  width: 100%;
  .form-box {
    display: flex;
    flex-direction: column;
    gap: 15px;

    & > div {
      position: relative;
      b {
        font-size: 12px;
        position: absolute;
        left: 0;
        bottom: -16px;
        color: red;
      }
    }

    .form-nickname {
      width: 45%;
      span {
        top: 50%;
        transform: translateY(-50%);
        right: 4px;
      }
    }
    .form-content {
      span {
        right: 8px;
        bottom: 8px;
      }
    }

    .submit-failed-text {
      color: red;
      font-size: 12px;
      position: absolute;
      top: -15px;
      left: 0px;
    }

    .submit-btn {
      color: #fff;
      letter-spacing: 4px;
      font-weight: 600;
      background-color: @primary;
      width: 120px;
      padding: 8px 5px;
      border-radius: 5px;
      border: none;
      outline: none;
      cursor: pointer;
      &:disabled {
        background-color: @gray;
        cursor: not-allowed;
      }
    }
  }
}
</style>
